<template>
  <div>
    <el-form :inline="true">
        <el-form-item  label="规格名称：" >
            <el-input v-model="specName" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item >
            <el-button type="primary" plain @click="search">查询</el-button>
         </el-form-item> 
         <el-form-item >
            <el-button type="primary" plain @click="add">添加</el-button>
         </el-form-item> 
         <el-dialog
                :close-on-click-modal="true"
                title="添加"
                :visible.sync="addDialog"
                width="30%"
                :before-close="handleClose">
                <el-form v-model="addObj" >
                    <el-form-item label="规格名称：" >
                        <el-input v-model="addObj.specName" placeholder="请输入规格名称"></el-input>
                    </el-form-item>
                    <el-form-item label="选项名称：">
                        <el-input v-model="addObj.addOption.optionName" placeholder="请输入选项名称"></el-input>
                    </el-form-item>
                    <el-form-item label="订单数量">
                        <el-input v-model="addObj.addOption.orders"  type="number" placeholder="请输入订单数量"></el-input>
                    </el-form-item>  
                 </el-form>       
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialog = false">取 消</el-button>
                    <el-button type="primary" @click="addConfirm">确 定</el-button>
                  </span>
         </el-dialog>
    </el-form>
    <el-table
            :data="dataList"
            style="width: 100%">
          <el-table-column
              label="id"
              align="center"
              prop="id">
          </el-table-column>
          <el-table-column
              label="规格名称"
              align="center"
              prop="specName">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="success"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
  </div>
</template>

<script>
import SpecificationAPi from '../api/SpecificationAPi';
export default {
    name:'specification',
    data(){
        return{
            dataList:[],    
            page:1,
            pageSize:5,
            total:100,
            specName:'',
            addObj:{
                addOption:{}
            },   
            addDialog:false
        }
    },
    methods:{
    //打开对话框
    add(){
        this.addDialog = true;
    },
    // 发送添加请求
    async addConfirm(){
        console.log(this.addObj);
        let {data} = await SpecificationAPi.add(this.addObj.specName,this.addObj.addOption);
        if(data.code == 200) this.$message.success("添加成功！");
        else this.$message.error("添加失败！");
        this.loadList();//重新加载列表
        this.addDialog = false;
    },
    async search(){
      let {data} = await  SpecificationAPi.loadList(this.page,this.pageSize,{specName:this.specName});
      this.dataList = data.rows
      this.total = data.total
    },
    handleClose(){
        this.addDialog = false;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.loadList();
    },
    async loadList(){
        let {data} = await SpecificationAPi.loadList(this.page,this.pageSize,{});
        this.dataList = data.rows
        this.total = data.total
    }
    },
    created(){
       this.loadList();
    },
}
</script>

<style>

</style>